<template>
  <el-card shadow="never" class="card">
    <div slot="header" class="clearfix">
      <span>专业学生就业情况</span>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="16">
          <div id="myChart" style="width:100%;height:400px"></div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple" id="label_vist" style="width:100%;height:400px"></div>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import "echarts/theme/macarons.js";
export default {
  data() {
    return {
      bt:[],
      hh:[],
      datas:[],
      ndatas:[],
      tittles:[],
      jy:0,
      ny:0
    };
  },
  methods: {
    datachli(da){
      for(var i = 0;i<da.length;i++) {
        var btinfo = {};
        var uinfo = {};
        var info = {};
        this.jy += da[i].ytotal;
        this.ny += da[i].utotal;
        this.tittles.push(da[i].cla);
        info.value = da[i].ytotal;
        uinfo.value = da[i].utotal;
        btinfo.name = da[i].cla;
        btinfo.value = da[i].ytotal;
        this.datas.push(info);
        this.ndatas.push(uinfo);
        this.bt.push(btinfo);
      }
      this.drawLine();
      this.label_vist()
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(
          document.getElementById("myChart"),
          "macarons"
      );
      // 绘制图表
      myChart.setOption({
        title: {
          text: "专业学生就业情况",
          subtext:"总人数"+(this.jy+this.ny)+"人",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["已就业", "未就业"],
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: this.tittles
          },
        ],
        yAxis: [
          {
            type: "value",
            name: '人数',
          },
        ],
        series: [
          {
            name: "已就业",
            type: "bar",
            data: this.datas,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            name: "未就业",
            type: "bar",
            data:this.ndatas,
            markPoint: {
              data: [
                { name: "最高", value: 182.2, xAxis: 7, yAxis: 183 },
                { name: "最低", value: 800, xAxis: 11, yAxis: 3 },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
        ],
      });
    },
    label_vist() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(
          document.getElementById("label_vist"),
          "macarons"
      );
      // 绘制图表
      myChart.setOption({
        title: {
          text: "专业学生生已就业情况",
          left: "center",
          subtext:"就业总人数"+this.jy+"人",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: this.tittles,
        },
        series: [
          {
            name: "就业人数",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data:this.bt,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },
  watch: {
    datas: {
      handler: function () {
        this.drawLine()
        this.label_vist();
      },
      deep: true,
    },
  },
  mounted() {
    //加载数据
    this.$axios({
      url: this.$axios.defaults.baseURL+"/teacher/selectempinfo",
      method: "get",
      params:{
        major:sessionStorage.getItem("headmajor")
      }
    }).then(res => {
      this.datachli(res.data)
    })
  },
};
</script>
<style scoped>
.card {
  min-height: 50vh;
}
</style>